<template>
  <el-dropdown class="user-container" trigger="click" popper-class="custom-popper">
    <!-- 头像 -->
    <section class="user-info">
      <error-img :src="userInfo?.imgUrl" fit="cover" class="user-img"></error-img>
      <!-- 用户名 -->
      <div class="user-name">
        <div class="text">{{ userInfo?.name ?? '未登录' }}</div>
        <el-progress class="progress" text-inside :percentage="60" :stroke-width="14">
          <span class="align-middle">600/1000</span>
        </el-progress>
      </div>
      <!-- 用户等级 -->
      <div class="user-level">
        <div class="level-top">MAX</div>
        <div class="level-bottom">LEVEL</div>
      </div>
    </section>

    <!-- 下拉菜单 -->
    <template #dropdown>
      <section class="dropdown-menu">
        <router-link class="menu-item" :to="{ name: RouterEnum.ADMIN }">
          <i class="fas fa-house"></i>
          <span class="text-nowrap">工作台</span>
        </router-link>
        <el-divider class="menu-item-divider" />
        <el-row class="menu-item" @click="logout()">
          <i class="fas fa-arrow-right-from-bracket"></i>
          <span class="text-nowrap">退出登录</span>
        </el-row>
      </section>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { RouterEnum } from '@/enum/routerEnum';
import useAuth from '@/hooks/useAuth';
import userStore from '@/plugins/pinia/stores/user';

// 用户信息
const { userInfo } = userStore();

// 登出
const { logout } = useAuth();
</script>

<style scoped lang="scss">
$container-width: 20rem;
$container-height: 3rem;

.user-container {
  position: relative;
  width: $container-width;
  padding: 0.2rem;
  color: white;
  background: rgba(255, 255, 255, 0.8);
  border-top: 0.15rem solid rgba(255, 255, 255, 0.15);
  border-right: 0.15rem solid rgba(255, 255, 255, 0.1);
  border-left: 0.1rem solid rgba(0, 0, 0, 0.5);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.273), #000000bd),
    linear-gradient(to left, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)),
    linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
  box-shadow: 0 -1px 4px 1px rgba(255, 255, 255, 0.4);
  border-radius: 3rem;
  cursor: pointer;
  .user-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    outline: none;
    .user-img {
      width: $container-height;
      height: $container-height;
      object-fit: cover;
      border-radius: 50%;
      overflow: hidden;
    }
    .user-name {
      flex: 1;
      align-self: start;
      margin-left: 1rem;
      .text {
        line-height: 1.8rem;
        font-size: 1.2rem;
        font-weight: bold;
      }
      .progress {
        margin-right: 1rem;
        :deep(.el-progress-bar__outer) {
          border-right: 1px solid #f7f7f741;
          border-bottom: 1px solid #f7f7f741;
          border-left: 2px solid #00000083;
          border-top: 2px solid #00000083;
          background-color: #222;
        }
        :deep(.el-progress-bar__inner) {
          display: flex;
          align-items: center;
          background: linear-gradient(to right, #2c5cf9 0%, #10b0e5 100%);
        }
      }
    }
    .user-level {
      align-self: start;
      margin-right: 1rem;
      .level-top {
        font-weight: 600;
        font-size: 1.5rem;
        line-height: 2rem;
      }
      .level-bottom {
        text-align: center;
        font-weight: 600;
        font-size: 12px;
        line-height: 12px;
        color: #736f6fbd;
        transform: scale(0.8);
      }
    }
  }
}

.custom-popper {
  .dropdown-menu {
    width: calc($container-width - 2rem);
    padding: 0.5rem 1rem;
    background-color: #222222d7;
    border-radius: 0.5rem;
    .menu-item {
      display: flex;
      align-items: center;
      padding: 0.5rem 1rem;
      color: white;
      font-size: 1.2rem;
      font-weight: 500;
      border-radius: 0.5rem;
      cursor: pointer;
      &:hover {
        background-color: #333333;
      }
      i {
        margin-right: 0.5rem;
        font-size: 1.5rem;
      }
      span {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .menu-item-divider {
      margin: 0.5rem 0;
    }
  }
}
</style>
